<!DOCTYPE html>
<html lang="en">
<head>
	<title>Logan and Tina</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
	<script src="./res/jquery-3.5.1.min.js"></script>
	<script src="./res/jquery-rotate.compress.js"></script>
	<style type="text/css">
		<style type="text/css">
		body, img, div{
			border: 0;
			padding: 0;
			margin: 0;
			line-height: 0;
			display: block;
		}
		body{
			background-color: lavender;
		}
		.header{
			height: 8vh;
			/* top:0; */
			background-color: lavender;
		}
		.footer{
			height: 2vh;
			/* top: 95vh; */
			background-color: lavender;
		}
		.mainer{
			width: 100%;
			max-width: 50vh;
			height: 80vh;
			margin: 0 auto;
			background-image: url("./res/rose.png");
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100%;
		}
		.leftpanel{
			position: relative;
			/* background-color: rgba(255, 0, 0, 0.424); */
			height: 60vh;
			width: 8vh;
			margin-top: 20vh;
			float: left;
			z-index: 1000;
		}
		.rightpanel{
			position: relative;
			/* background-color: rgba(0, 128, 0, 0.438); */
			height: 60vh;
			width: 8vh;
			margin-top: 20vh;
			float: right;
			z-index: 1000;
		}
		.mainbox{
			position: absolute;
			top: 8vh;
			width: 100%;
			max-width: 50vh;
			height: 80vh;
			/* background-color: bisque; */
			overflow: hidden;
		}
		.wheel{
			background-color: teal;
			position: relative;
			width: 100%;
			top: 150vh;
			height: 100%;
			z-index: 999;
		}
		.outerBox{
			position: relative;
			top: -125vh;
			/* left: 0 */
			margin: 0 auto;
			height: 32vh;
			width: 32vh;
			/* margin: 3% auto; */
			/* background-color: blueviolet; */
			/* border-top: 1px dashed lavender; */
			/* border-bottom: 1px solid lavender; */
			box-shadow: 0px 0px 5px gray;
			/* z-index: 999; */
		}
		.outerCircleBorder{
			height: 100%;
			background-color:whitesmoke;
			clip-path: circle(38% at 50% 50%);
			-webkit-clip-path: circle(38% at 50% 50%);
			/* z-index: 999; */
		}
		.ourterCircleSolid{
			height: 100%;
			background-color:lavender;
			clip-path: circle(37% at 50% 50%);
			-webkit-clip-path: circle(37% at 50% 50%);
		}
		.outerCircleinner{
			height: 100%;
			background-color: whitesmoke;
			clip-path: circle(35% at 50% 50%);
			-webkit-clip-path: circle(35% at 50% 50%);
		}
		.pic{
			height: 100%;
			width: 100%;
			background-color: darkorchid;
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100%;
			clip-path: circle(34% at 50% 50%);
			-webkit-clip-path: circle(34% at 50% 50%);
			animation:rotation 120s linear infinite normal;
			animation-play-state:paused;
		}
		.pic-rotate{
			animation-play-state:running;	
		}
		@keyframes rotation{
			0%		{transform: rotate(0deg);}
			100%	{transform: rotate(360deg);}
		}
		.innerCircleBorder{
			height: 100%;
			background-color: whitesmoke;
			clip-path: circle(10% at 50% 50%);
			-webkit-clip-path: circle(10% at 50% 50%);
		}
		.innerCircleSolid{
			height: 100%;
			background-color: lavender;
			clip-path: circle(9% at 50% 50%);
			-webkit-clip-path: circle(9% at 50% 50%);
		}
		.innerCircleinner{
			height: 100%;
			background-color: whitesmoke;
			clip-path: circle(7% at 50% 50%);
			-webkit-clip-path: circle(7% at 50% 50%);
		}
		.innerCircle{
			height: 100%;
			background-color: white;
			clip-path: circle(6% at 50% 50%);
			-webkit-clip-path: circle(6% at 50% 50%);
		}
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="panelbox">

	</div>
	<div class="mainer">
	<div class="leftpanel"></div>
	<div class="rightpanel"></div>
	<div class="mainbox">
		<div class="wheel">
			<div class="outerBox">
				<div class="outerCircleBorder">
					<div class="ourterCircleSolid">
						<div class="outerCircleinner">
							<div class="pic" style="background-image:url('./res/1.jpg');">
								<div class="innerCircleBorder">
									<div class="innerCircleSolid">
										<div class="innerCircleinner">
											<div class="innerCircle">

											</div>
										</div>
									</div>
								</div>						
								 <audio class = 'audio' preload="auto">
									<source src="./res/1.mp3">
								</audio>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
	<div class="mainbox">
		<div class="wheel">
			<div class="outerBox">
				<div class="outerCircleBorder">
					<div class="ourterCircleSolid">
						<div class="outerCircleinner">
							<div class="pic" style="background-image:url('./res/2.jpg');">
								<div class="innerCircleBorder">
									<div class="innerCircleSolid">
										<div class="innerCircleinner">
											<div class="innerCircle">

											</div>
										</div>
									</div>
								</div>						
								 <audio class = 'audio' preload="auto">
									<source src="./res/2.mp3">
								</audio>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
	<div class="mainbox">
		<div class="wheel">
			<div class="outerBox">
				<div class="outerCircleBorder">
					<div class="ourterCircleSolid">
						<div class="outerCircleinner">
							<div class="pic" style='background-image:url("./res/3.jpg");'>
								<div class="innerCircleBorder">
									<div class="innerCircleSolid">
										<div class="innerCircleinner">
											<div class="innerCircle">

											</div>
										</div>
									</div>
								</div>						
								 <audio class = 'audio' preload="auto">
									<source src="./res/3.mp3">
								</audio>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
	<div class="mainbox">
		<div class="wheel">
			<div class="outerBox">
				<div class="outerCircleBorder">
					<div class="ourterCircleSolid">
						<div class="outerCircleinner">
							<div class="pic" style='background-image:url("./res/4.jpg");'>
								<div class="innerCircleBorder">
									<div class="innerCircleSolid">
										<div class="innerCircleinner">
											<div class="innerCircle">

											</div>
										</div>
									</div>
								</div>						
								 <audio class = 'audio' preload="auto">
									<source src="./res/4.mp3">
								</audio>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
	</div>
	<div class="footer"></div>
</body>
<script>
	$(document).ready(function(){
		$('.pic').click(function(){
			if($(this).children('audio')[0].paused){
				// pause all
				$('audio').each(function(){
					$(this)[0].pause();
				})
				// play this
				$(this).children('audio')[0].play();			
				$('.pic').each(function(){
					$(this).removeClass('pic-rotate');
				})
				$(this).addClass('pic-rotate');
			}else{
				// pause this
				$(this).children('audio')[0].pause();
				$(this).removeClass('pic-rotate')
			}
		});

		var ang = 0;
		$('.wheel').each(function(){
			$(this).rotate(ang);
			ang+=15;
		});
		var nowang = 0
		$('.leftpanel').rotate({
			bind:{
				click: function(){
					if (nowang<0) {					
						nowang += 15
						ang = nowang - 15
						$('.wheel').each(function(){
							$(this).rotate({
								angle: ang,
								animateTo: ang - 0 + 15							
							});
							ang += 15
						})
					}
				}
			}
		})
		// $(this).getRotateAngle()
		$('.rightpanel').rotate({
			bind:{
				click: function(){
					if (nowang>-45) {
						nowang -= 15
						ang = nowang + 15
						$('.wheel').each(function(){
							$(this).rotate({
								angle: ang,
								animateTo: ang - 15
							});
							ang += 15
						})						
					}					
				}
			}
		})
	});
</script>
</html>
